﻿body
{
}

button
{
    margin: 10px;
}

@media screen and (-ms-view-state: full-screen)
{
}

@media screen and (-ms-view-state: fill)
{
}

@media screen and (-ms-view-state: snapped)
{
}

@media screen and (-ms-view-state: device-portrait)
{
}

#artboard
{
    width: 100%;
    height: 100%;
    display: -ms-grid;
    -ms-grid-columns: 100px 1fr 100px;
    -ms-grid-rows: 50px 1fr 100px;
}

#canvas
{
    -ms-grid-column: 2;
    -ms-grid-row: 2;
    width: 100%;
    height: 100%;
    border: 1px solid black;
}

#panel
{
    -ms-grid-column: 2;
    -ms-grid-row: 3;
    display: -ms-grid;
    -ms-grid-columns: 2fr 1fr;
    -ms-grid-column-align: start;
    margin: 10px;
}

#brushSize
{
}

#brushDistance
{
	-ms-grid-column: 2;
	margin-left: 10px;
}

#btnClear
{
    -ms-grid-column: 3;
    -ms-grid-column-align: start;
    -ms-grid-row-align: start;
}

#btnBrush
{
    -ms-grid-column: 4;
    -ms-grid-column-align: start;
    -ms-grid-row-align: start;
}

#colors
{
    -ms-grid-column: 2;
    margin: 10px;
}

.color
{
    width: 35px;
    height: 35px;
    float: left;
    margin-right: 10px;
    border: 1px solid black;
    cursor: pointer;
}

    .color.selected
    {
        border: 1px dashed gray;
    }